<template>
	<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" @down="downCallback()" @up="upCallback">
		<view>
			<view v-for="(item, _index) in dataList" :key="_index">
				<view class="flex-center bg-white" style="padding: 24rpx 30rpx 22rpx 30rpx;">
					<view class="u-radius-16 img-container clear-flex">
						<x-image :src="showImage(item.imgUrl, 'logo')" mode="aspectFill"/>
					</view>

					<view class="flex-between flex-column" style="padding: 2rpx 0 0 20rpx; height: 188rpx;width: 100%;">
						<view class="u-f-28 u-lh-40 font-medio linecamp-2">{{ item.title || '' }}</view>

						<view class="u-m-t-4 u-f-26 u-lh-36 flex-between flex-column">
							<view class="flex-center">
								<view class="u-m-r-10 color-grew">{{ lang_shop.commodityStatus }}:</view>
								<view class="color-red">{{ shelfStatusText(item) }}</view>
							</view>

							<view class="flex-center-between u-m-t-14">
								<view class="flex-baseline font-bold color-red-dep u-lh-38">
									<view class="u-f-32">{{ lang_unit.money }}</view>
									<view class="u-f-44">{{ item.price || 0 }}</view>
								</view>

								<view class="flex-center">
									<view v-if="item.serviceStatus !== 1 && item.approveStatus === 1" class="u-m-r-22">
										<x-common-btn width="128" height="56" color="#333333" background="#FFFFFF"
											borderColor="#e9e9e9" @click="$emit('delete', item)">
											<view class="u-f-24 u-lh-34 font-medio">{{ lang_common.delete }}</view>
										</x-common-btn>
									</view>

									<x-common-btn width="128" height="56" @click="shelfStaffAction(item, _index)">
										<view class="u-f-24 u-lh-34 font-medio">{{ shelfText(item) }}
										</view>
									</x-common-btn>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	import {
		merchantServiceServicePage,
		merchantServiceUpOrDown
	} from '@/api/merchant/service.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {
				dataList: []
			}
		},
		created() {
			uni.$on('update-shop-serive-list', () => {
				this.downCallback()
			})
		},
		methods: {
			shelfStatusText({
				approveStatus,
				serviceStatus
			}) {
				// 审核状态approveStatus -1不通过 0待审核 1审核通过
				// 服务状态serviceStatus -1已下架 0待上架 1上架中
				let obj = {
					approve: {
						['1']: 'approveSuccess',
						['-1']: 'approveFail',
						['0']: 'waitApprove'
					},
					service: {
						['1']: 'onShelf',
						['-1']: 'removeShelf',
						['0']: 'waitShelf'
					}
				}
				let status = 0,
					objKey = 'service';
				if (approveStatus !== 1) {
					status = approveStatus || 0
					objKey = 'approve'
				} else {
					status = serviceStatus || 0
					objKey = serviceStatus ? 'service' : 'approve'
				}
				return this.lang_common[obj[objKey][status]]
			},
			shelfText({
				approveStatus,
				serviceStatus
			}) {
				let obj = {
					['1']: 'offShelf',
					['-1']: 'putShelf',
					['0']: 'putShelf'
				}
				let resultKey = approveStatus === 1 ? obj[serviceStatus] : 'modify'
				return this.lang_common[resultKey]
			},
			// 上下架服务
			shelfStaffAction(item, index) {
				if (item.approveStatus === 1) {
					let targetStatus = item.serviceStatus === 1 ? -1 : 1
					merchantServiceUpOrDown({
						serviceId: item.id,
						targetStatus
					}).then(() => {
						this.$set(this.dataList[index], 'serviceStatus', targetStatus)
					})
				} else {
					uni.navigateTo({
						url: `/pages/shop/staff/service/service?serviceId=${ item.id }&type=edit`,
						success: res => {
							res.eventChannel.emit('shop-service-page', item)
						}
					})
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef' + this.i]
				merchantServiceServicePage({
					pageNumber: page.num,
					pageSize: page.size
				}).then(res => {
					node && node.mescroll.endSuccess(res.list.length);
					if (page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList = this.dataList.concat(res.list); //追加新数据
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef' + this.i]
				node && node.mescroll.resetUpScroll()
			},
		}
	}
</script>

<style scoped lang="scss">
	.img-container {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #f9f9f9;
	}
</style>
